<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全国城市空气质量监测</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <style>
        .chart-container { height: 400px; margin: 20px 0; }
        .card { margin-bottom: 30px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
        .card-title { color: #2c3e50; font-weight: 600; }
        .description { color: #7f8c8d; line-height: 1.6; }
        .header { background: #2c3e50; color: white; padding: 30px 0; margin-bottom: 30px; }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <h1>全国城市空气质量监测平台</h1>
            <p class="lead">实时更新全国主要城市空气质量指数（AQI）数据</p>
        </div>
    </div>

    <div class="container">
        <!-- 图表1：AQI TOP10城市 -->
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">AQI指数排名TOP10城市</h4>
                <div class="chart-container" id="chart1"></div>
                <p class="description">
                    本图表展示了空气质量指数最高的前10个城市。AQI指数越高表示空气污染越严重，
                    需要特别注意防护措施。当前数据显示工业发达地区普遍空气质量压力较大。
                </p>
            </div>
        </div>

        <!-- 图表2：空气质量分布 -->
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">空气质量等级分布</h4>
                <div class="chart-container" id="chart2"></div>
                <p class="description">
                    全国城市空气质量等级分布饼状图，清晰展示各空气质量等级占比情况。
                    当前数据表明大部分城市空气质量处于良及以上水平，但仍有部分城市面临污染压力。
                </p>
            </div>
        </div>

        <!-- 其他图表类似结构... -->
    </div>

    <script>
    // 图表1：AQI TOP10柱状图
    const chart1 = echarts.init(document.getElementById('chart1'));
    chart1.setOption({
        tooltip: { trigger: 'axis' },
        xAxis: {
            type: 'category',
            data: {{ top10_cities | map(attribute='city') | list | tojson }}
        },
        yAxis: { type: 'value' },
        series: [{
            data: {{ top10_cities | map(attribute='aqi') | list | tojson }},
            type: 'bar',
            itemStyle: { color: '#e74c3c' }
        }]
    });

    // 图表2：质量分布饼图
    const chart2 = echarts.init(document.getElementById('chart2'));
    chart2.setOption({
        tooltip: { trigger: 'item' },
        series: [{
            type: 'pie',
            radius: '60%',
            data: [
                {% for key, value in quality_dist.items() %}
                { value: {{ value }}, name: '{{ key }}' },
                {% endfor %}
            ],
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            }
        }]
    });
</script>
</body>
</html>